<template>
  <div>
    <a-select ref="select" v-model:value="value1" style="width: 220px; height: 50px">
      <a-select-option value="red-theme">红色</a-select-option>
      <a-select-option value="green-theme">绿色</a-select-option>
      <a-select-option value="blue-theme">蓝色</a-select-option>
    </a-select>
    <a-button type="primary">Primary Button</a-button>

    <p class="p1">p1</p>
    <button class="btn">btn1</button>
    <button>btn2</button>
  </div>
</template>
<script setup>
import { ref, watch } from "vue"

let value1 = ref("")

watch(value1, val => {
  console.log(val)
  document.documentElement.classList = val
})
</script>

<style scoped lang="less">
.p1 {
  margin-bottom: 30px;
  height: 100px;
  background: var(--btn-backgrond-color);
  color: var(--btn-color);
}

.btn {
  background: var(--btn-backgrond-color);
  color: var(--btn-color);
  width: var(--btn-width);
  height: var(--btn-height);
}

.ant-btn-primary {
  background-color: var(--btn-backgrond-color);
}
</style>
